'use client';
import type { FC } from 'react';
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
// import {
//   useContentStore,
//   useCustomizationStore,
//   usePersonalDetailsStore,
//   useStore,
// } from "../../../store";
import { Component } from '@/cvcomponents';
import StyledComponentsRegistry from '@/util/registry-style';
import Loading from '@/app/components/Loading';
import { useContentStore } from '@/src/providers/content-store-provider';
import { useCustomizationStore } from '@/src/providers/customization-store-provider';
import { usePersonalDetailStore } from '@/src/providers/personal-detail-store-provider';
import { useCommonStore } from '@/src/providers/common-store-provider';

const Index: FC<any> = ({ leftPart }) => {
  const ref = useRef<HTMLDivElement>(null);
  const ref2 = useRef<HTMLDivElement>(null);
  const a4Width = 820;
  const a4Height = 1159.71;
  const [scale, setScale] = useState(1);
  const [showLoading, setShowLoading] = useState(true);
  const scaleRef = useRef(0);
  const pageNumRef = useRef(1);
  const { content } = useContentStore((state) => state);
  const { customization } = useCustomizationStore((state) => state);
  const { personalDetails } = usePersonalDetailStore((state) => state);
  const { setHtml, fontScale } = useCommonStore((state) => state);
  const getScale = () => {
    const r = 1.04;
    let scale = 1;
    if (window.innerWidth <= 800) {
      scale = window.innerWidth / a4Width / r;
    } else {
      scale =
        (Math.min(window.innerWidth, 1920) - leftPart.current?.offsetWidth) /
        a4Width /
        r;
    }
    return scale;
  };
  const setPreviewSize = () => {
    if (ref.current) {
      const scale = getScale();
      scaleRef.current = scale;
      setScale(scale);
      (ref.current as any).style.width = `${a4Width * scale}px`;
      // if (personalDetails.id) {
      // (ref.current as any).style.height = `${
      //   (pageNumRef.current * a4Height + (pageNumRef.current - 1) * 10) *
      //   (scale || scaleRef.current)
      // }px`;
      // }
    }
  };
  useLayoutEffect(() => {
    setPreviewSize();
  }, []);
  useEffect(() => {
    const resize = () => {
      setPreviewSize();
    };
    window.addEventListener('resize', resize);
    return () => {
      window.removeEventListener('resize', resize);
    };
  }, []);
  const onChange = (html) => {
    setHtml(html);
  };
  useEffect(() => {
    if (personalDetails.id) {
      setShowLoading(true);
    }
  }, [customization.template]);
  return (
    <>
      {showLoading ? (
        <Loading
          style={{
            position: 'absolute',
            width: '100%',
            height: '93vh',
          }}
        />
      ) : null}
      <div
        ref={ref}
        style={{
          // margin: "0 auto",
          overflow: 'hidden',
          minHeight: '100vh',
        }}
      >
        <div
          ref={ref2}
          style={{
            transform: `scale(${scale})`,
            transformOrigin: 'left top',
            position: 'relative',
          }}
        >
          <StyledComponentsRegistry>
            <Component
              fontScale={fontScale}
              heightAuto={!personalDetails.id}
              resume={{
                content,
                customization,
                personalDetails,
              }}
              onReady={(pageNum) => {
                setShowLoading(false);
                pageNumRef.current = pageNum;
                if (personalDetails.id) {
                  (ref.current as any).style.height = `${
                    (pageNum * a4Height + (pageNum - 1) * 10) * scaleRef.current
                  }px`;
                }
              }}
              onChange={onChange}
              isNeedPaging={!!personalDetails.id}
            />
          </StyledComponentsRegistry>
        </div>
      </div>
    </>
  );
};

export default Index;
